﻿<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="../../Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="../../Scripts/vue.js"></script>
    <link href="../../../DataUser/Style/ccbpm.css" rel="stylesheet" type="text/css" />

    <script language="JavaScript" src="../../Comm/JScript.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../Scripts/QueryString.js"></script>
    <script type="text/javascript" src="../../Scripts/config.js"></script>
    <script type="text/javascript" src="../../Comm/Gener.js"></script>
    <script src="../../Scripts/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="../../Scripts/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../Scripts/bootstrap/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="../../Scripts/element/element.css" rel="stylesheet" />

    <script src="../../Scripts/bootstrap/bootstrap-table/src/bootstrap-table.js" type="text/javascript"></script>
    <link href="../../Scripts/bootstrap/bootstrap-table/src/bootstrap-table.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/bootstrap/bootstrap-table/src/locale/bootstrap-table-zh-CN.js" type="text/javascript"></script>

    <script src="../../Scripts/bootstrap/bootstrap-treeview/src/js/bootstrap-treeview.js" type="text/javascript"></script>
    <link href="../../Scripts/bootstrap/bootstrap-treeview/src/css/bootstrap-treeview.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/element/element.js"></script>

    <style type="text/css">
        .row-margin-top {
            margin-top: 20px;
        }

        .newBtn {
            display: inline-block;
            padding: 1px 4px;
            margin-bottom: 0;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.42857143;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .main_content {
            display: flex;
            justify-content: space-between;
        }

        .Right_table {
            display: flex;
            flex-direction: column;
            justify-content: start;
            width: 57.333%;
            height: 80vh;
            margin: 0px 5%;
        }
        .el-input {
            width: 75%;
            margin: 10px 0 10px 15px;
        }
        .el-input__inner {

            width: 100%;
        }
        .search_content {
            padding: 0 20px;
            height: 30px;
            line-height: 30px;
            margin-left: 15px;
            font-size: 13px;
        }

        .top_text {
            width: 25%;
        }

        .choose_content {
            text-align: right;
        }

        .el-tree {
            width: 33.33%
        }
        .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
            color: #FFFFFF;
            background-color: #428bca;
            font-weight:700;
        }
        .el-table .el-table__cell{
            padding:5px 0;
        }
        .el-button--text {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div style="display: flex; align-items: center;">
            <el-input v-model="searchValue" placeholder="请输入内容"></el-input>
            <el-button type="primary" size="mini" @click="doFilter" class="search_content" >搜索</el-button>
        </div>
        <div class="main_content">
            <el-tree :props="defaultProps"
                     :load="loadNode"
                     :data="jsonTree"
                     lazy
                     node-key="id"
                     ref="tree"
                     highlight-current
                     @node-click="handleNodeClick">
            </el-tree>
            <div class="Right_table">
                <el-table :data="tableData"
                          height="250"
                          border
                          style="width: 100%"
                          @select="handleSelectionChange">
                    <el-table-column type="selection"
                                     style="width:3%">
                    </el-table-column>
                    <el-table-column v-for="(head,index) in searchTableColumns"
                                     :key="head.field"
                                     :label="head.title"
                                     :prop="head.field"
                                      style="width:32%">
                    </el-table-column>


                </el-table>
                <el-table :data="selectedRows"
                          height="250"
                          border
                          style="width: 100%;margin-top:20px;">
                    <el-table-column v-for="(head,index) in chooseTableColumns"
                                     :key="head.field"
                                     :label="head.title"
                                     :prop="head.field"
                                     style="width:25%">
                    </el-table-column>
                    <el-table-column :render-header="(h, obj) => renderHeader(h, obj, '你的参数')" style="width:25%">
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index, scope.row)"
                                       type="text"
                                       size="small">
                                <i class="el-icon-delete"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    searchValue: "",
                    checkAll: false,
                    mapExt: null,
                    defaultProps: {
                        children: 'children',
                        label: 'name',
                        isLeaf: 'leaf'
                    },
                    jsonTree: [],
                    rootNo: null,
                    child: [],
                    searchTableColumns: [],
                    chooseTableColumns: [],
                    isBackBtn: '',
                    IsEnsOfMExitParentNo: 1,
                    tags: [],
                    tableData: [],
                    selectedRows: []
                };
            },
            methods: {
                //获取当前节点再次进行渲染
                handleNodeClick(data) {
                    var hander = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity");
                    hander.AddUrlData();
                    hander.AddPara("Key", data.id);
                    var json = hander.DoMethodReturnJSON("BranchesAndLeaf_SearchByNodeID");
                    this.tableData = json;
                },
                //搜索
                doFilter() {
                    this.tableData = this.tableData.filter(item => {
                        return item.No.includes(this.searchValue)
                    })
                },
                //删除行数据
                deleteRow(index, rows) {
                    console.log(index);
                    console.log(rows);
                    var tmp = $.grep(this.selectedRows, function (value) {
                        return value.No != rows.No;
                    });
                    this.selectedRows = tmp;
                    this.Delete(rows.No);
                },
                //删除
                Delete(no) {
                    var hander = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity");
                    hander.AddUrlData();
                    hander.AddPara("Key", no);
                    var msg = hander.DoMethodReturnString("BranchesAndLeaf_Delete");
                    if (msg.indexOf('err@') == 0)
                        alert(msg);
                },
                //保存
                Savcceval(val) {

                    var dot2DotEnName = GetQueryString("Dot2DotEnName");
                    var attrOfOneInMM = GetQueryString("AttrOfOneInMM");
                    var attrOfMInMM = GetQueryString("AttrOfMInMM");
                    var mm = new Entity(dot2DotEnName);
                    mm[attrOfOneInMM] = GetPKVal();
                    mm[attrOfMInMM] = val;
                    if (mm.Update() == 0) {
                        mm.Insert();
                    }
                },
                //多选框操作
                handleSelectionChange(val, row) {
                    console.log(val);
                    console.log(row);
                    if (val.length > 0) {
                        this.selectedRows.push(row)
                        this.Savcceval(row.No);
                    } else {
                        var tmp = $.grep(this.selectedRows, function (value) {
                            return value.No != row.No;
                        });
                        this.selectedRows = tmp;
                        this.Delete(row.No);
                    }

                },
                // 自定义表头
                renderHeader(h, { column, $index }, type) {
                    console.log('列表加载就会触发', h, { column, $index }, type)
                    let that = this
                    // 逻辑是 h() 括号里包裹标签 第一个参数是标签名 第二个是属性  第三个是标签内容  如果是多个标签需要包裹数组
                    return h(
                        'div', [
                        // 列名称
                        h('span', column.label),
                        // 名称
                        h('div', '操作')
                    ],
                    )
                },
                //懒加载
                loadNode(node, resolve) {
                    if (node.level === 0) {
                        var roootData = [];
                        roootData = this.jsonTree.map(key => {
                            return {
                                name: key.label,
                                id: key.id,
                                children: key.children,
                            }
                        })
                        return resolve(roootData);
                    }
                    if (node.level > 3) {
                        return resolve([]);
                    }
                    if (node.level > 0 && this.IsEnsOfMExitParentNo == 1) {
                        var handler = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity")
                        handler.AddPara("RootNo", node.data.id);
                        handler.AddPara("DefaultGroupAttrKey", GetQueryString("DefaultGroupAttrKey"));
                        handler.AddPara("EnsOfM", GetQueryString("EnsOfM"));
                        var json = handler.DoMethodReturnJSON("BranchesAndLeaf_GetTreesByParentNo");
                        console.log(json);
                        if (json.length > 0) {
                            this.child = this.creatTreeChildern(json, node.data.id);
                            var data = [];
                            data = this.child.map(item => {
                                return {
                                    name: item.label,
                                    id: item.id,
                                    children: item.children,
                                }
                            })
                            setTimeout(() => {
                                resolve(data);
                            }, 500);
                            console.log(json.length);
                            var hander = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity");
                            hander.AddUrlData();
                            hander.AddPara("Key", node.data.id);
                            var json = hander.DoMethodReturnJSON("BranchesAndLeaf_SearchByNodeID");
                            this.tableData = json;

                        } else {
                            //查询人员
                            var hander = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity");
                            hander.AddUrlData();
                            hander.AddPara("Key", node.data.id);
                            var json = hander.DoMethodReturnJSON("BranchesAndLeaf_SearchByNodeID");
                            this.tableData = json;
                            console.log(this.tableData);
                            resolve([]);
                        }
                    }
                },
                createJsonToTree(jsonArray, parentNo) {
                    //获取ParentNo的数据
                    var items = $.grep(jsonArray, function (obj) {
                        return obj.No == parentNo;
                    });
                    if (items.length != 0) {
                        this.jsonTree.push({
                            "id": items[0].No,
                            "label": items[0].Name,
                            "children": this.creatTreeChildern(jsonArray, items[0].No),
                            "state": { checked: checked, disabled: false }
                        });
                    } else {
                        for (var i = 0; i < jsonArray.length; i++) {
                            var data = jsonArray[i];
                            if (data.ParentNo.trim() == parentNo) {
                                var checked = false;
                                this.jsonTree.push({
                                    "id": data.No,
                                    "label": data.Name,
                                    "children": this.creatTreeChildern(jsonArray, data.No),
                                    "state": { checked: checked, disabled: false }
                                });
                            }
                        }
                        this._(this.jsonTree);
                    }
                },
                _(treeArray) {
                    for (var i = 0; i < treeArray.length; i++) {
                        var o = treeArray[i];
                        if ($.isArray(o.children)) {
                            if (o.children.length == 0) {
                                o.children = [];
                            } else {
                                this._(o.children);
                            }
                        }
                    }
                },
                creatTreeChildern(jsonArray, parentNo) {
                    var childList = []
                    for (var i = 0; i < jsonArray.length; i++) {
                        var data = jsonArray[i];
                        if (data.ParentNo == parentNo) {
                            var checked = false;
                            this.jsonTree.filter((ID) => {
                                if (ID.id === parentNo) ID.children.push({
                                    "id": data.No,
                                    "label": data.Name,
                                    "children": this.creatTreeChildern(jsonArray, data.No),
                                    "state": { checked: checked, disabled: false }
                                })
                            })
                            childList.push({
                                "id": data.No,
                                "label": data.Name,
                                "children": this.creatTreeChildern(jsonArray, data.No),
                                "state": { checked: checked, disabled: false }
                            });
                        }
                    }
                    return childList;
                },
                isLegalName(name) {
                    if (!name) {
                        return false;
                    }
                    return name.match(/^[a-zA-Z\$_][a-zA-Z\d\$_]*$/);
                },
                //获取父节点数据
                loadTree() {
                    this.rootNo = GetQueryString("RootNo");
                    if (this.rootNo == null || this.rootNo == undefined || this.rootNo == "")
                        this.rootNo = "0";

                    //获得数据.
                    var hander = new HttpHandler("BP.WF.HttpHandler.WF_CommEntity");
                    hander.AddUrlData();
                    var data = hander.DoMethodReturnJSON("BranchesAndLeaf_Init");

                    var dbTrees = data["DBTrees"]; //左边的树.
                    this.selectedRows = data["DBMMs"]; //选择的数据.
                    var showCols = "";
                    if (data["Base_Info"] != undefined) {
                        IsEnsOfMExitParentNo = data["Base_Info"][0].IsExitParentNo;
                        if (data["Base_Info"][0].ExtShowCols != undefined && data["Base_Info"][0].ExtShowCols != "")
                            showCols = data["Base_Info"][0].ExtShowCols;
                    }
                    if (showCols == "")
                        showCols = "No=编号@Name=名称";
                    this.createJsonToTree(dbTrees, this.rootNo);
                    //显示列的中文名称.
                    var tmp = showCols.split("@");
                    for (var i = 0; i < tmp.length; i++) {
                        var o = tmp[i];
                        if (o == '')
                            continue;
                        var exp = o.split("=");
                        var field;
                        var title;
                        if (exp.length == 1) {
                            field = title = exp[0];
                        } else if (exp.length == 2) {
                            field = exp[0];
                            title = exp[1];
                        }
                        if (!this.isLegalName(field)) {
                            return true;
                        }
                        if (field == GetQueryString("DefaultGroupAttrKey"))
                            field = field + "Text";
                        this.searchTableColumns.push({
                            field: field,
                            title: title
                        });
                        this.chooseTableColumns.push({
                            field: field,
                            title: title
                        });
                    }
                    console.log(this.searchTableColumns);
                },
            },
            created() {
                this.loadTree();
            },


        })
    </script>
</body>

</html>